<template>
    <view style="height: 100%">
        <l-popup
            :show="showClone"
            :direction="directionClone"
            :transition="transition"
            :opacity="opacity"
            :locked="lockedClone"
            :z-index="zIndex"
            l-class="l-class"
            l-bg-class="l-bg-class"
            @lintap="onArcPopupTap"
        >
            <scroll-view :scroll-y="true" class="arc-popup l-panel-class" :style="arcStyle">
                <view :class="'header-popup ' + (headerFixed ? 'fixed' : '') + ' l-header-class'">
                    <slot name="header" />
                </view>
                <view class="content-arc-popup">
                    <slot />
                </view>
            </scroll-view>
        </l-popup>
    </view>
</template>

<script>
import lPopup from '../popup/index';
import validator from '../behaviors/validator';
import zIndex from '../behaviors/zIndex';
const detail = true;
const option = {
    bubbles: true,
    composed: true
};
export default {
    data() {
        return {
            _arcRadiusTop: 12,
            _ardRadiusBottom: 18,
            arcStyle: '',
            zIndex: 0,
            showClone: '',
            directionClone: '',
            lockedClone: ''
        };
    },

    mixins: [zIndex, validator],
    externalClasses: ['l-class', 'l-panel-class', 'l-bg-class', 'l-header-class'],

    options: {
        multipleSlots: true
    },

    props: {
        show: {
            type: Boolean,
            default: false
        },
        maxHeight: {
            type: Number,
            default: 600
        },
        minHeight: {
            type: Number,
            default: 200
        },
        arcRadius: {
            type: Number,
            default: 18
        },
        transition: {
            type: Boolean,
            default: true
        },
        locked: {
            type: Boolean,
            default: false
        },
        opacity: {
            type: Number,
            default: 0.4
        },
        direction: {
            type: String,
            options: ['top', 'bottom'],
            default: 'bottom'
        },
        headerFixed: {
            type: Boolean,
            default: true
        }
    },

    watch: {
        show: function (t) {
            if (t) {
                this.$emit(
                    'linshow',
                    {
                        detail: true
                    },
                    option
                );
                this.getArcPopupStyle();
            } else {
                this.$emit(
                    'linclose',
                    {
                        detail: true
                    },
                    option
                );
            }
        },
        arcRadius: function (t) {
            if ('top' === this.directionClone) {
                this._arcRadiusTop = t;
            } else {
                this._ardRadiusBottom = t;
            }
            this.getArcPopupStyle();
        }
    },

    methods: {
        ready() {
            this.getArcPopupStyle();
        },

        _init() {
            uni.lin = uni.lin || {};
            uni.lin.showArcPopup = (t) => {
                const {
                    zIndex: o = 99,
                    tranistion: e = true,
                    direction: i = 'bottom',
                    locked: a = false
                } = {
                    ...t
                };
                this.setData({
                    zIndex: o,
                    tranistion: e,
                    directionClone: i,
                    lockedClone: a,
                    showClone: true
                });
            };
            uni.lin.hideArcPopup = () => {
                this.setData({
                    showClone: false
                });
            };
        },

        getArcPopupStyle() {
            const t = this.directionClone;
            const o = this._arcRadiusTop;
            const e = this._ardRadiusBottom;
            const i = `\n        border-bottom-left-radius:${'top' === t ? o : 0}rpx;\n        border-bottom-right-radius:${
                'top' === t ? o : 0
            }rpx;\n        border-top-left-radius:${'bottom' === t ? e : 0}rpx;\n        border-top-right-radius:${'bottom' === t ? e : 0}rpx;\n        max-height:${
                this.maxHeight
            }rpx;\n        min-height:${this.minHeight}rpx;\n      `;
            this.setData({
                arcStyle: i
            });
        },

        onArcPopupTap() {
            this.lockedClone ||
                (this.showClone &&
                    this.setData({
                        showClone: false
                    }));
        }
    },

    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },

    created: function () {}
};
</script>
<style>
.container-arc-popup {
    width: 100%;
}
.arc-popup {
    overflow: hidden;
    width: 100%;
    background: #fff;
}
.content-arc-popup {
    padding: 30rpx;
    box-sizing: border-box;
}
.header-popup {
    width: 100%;
    z-index: 999;
}
.header-popup.fixed {
    position: sticky;
    top: 0;
    background-color: #fff;
}
</style>
